2025年8月17日日本語

CSS @scroll-timelineの包括的なガイド。構文、プロパティ、使用法、高度なアニメーション技術を解説。現代的なWeb体験のための魅力的なスクロール駆動型アニメーションの作成方法を学びます。

Mastering CSS @scroll-timeline: Animation Control Through Scroll Progress

Web開発の絶え間ない進化の中で、魅力的でインタラクティブなユーザーエクスペリエンスの構築は最も重要です。CSSはこれを実現するためのさまざまなツールを提供していますが、最も強力でありながら見過ごされがちなものの1つが@scroll-timeline at-ruleです。この機能により、開発者はアニメーションを要素のスクロールの進行に直接結び付け、魅力的なスクロール駆動型アニメーションを作成できます。この記事では、@scroll-timelineの構文、プロパティ、実用的な使用法、および高度なアニメーション技術を網羅的に解説し、Webデザインを向上させます。

What is CSS @scroll-timeline?

@scroll-timelineは、スクロールタイムラインを定義するCSS at-ruleです。これは、指定された要素のスクロール位置に対応する一連の状態です。従来の時間ベースのアニメーションに依存する代わりに、@scroll-timelineはアニメーションの進行をユーザーのスクロールアクションにリンクさせます。これにより、アニメーションの速度がユーザーのスクロール動作によって直接制御されるため、より自然で応答性の高いアニメーションが実現します。

これにより、次のエキサイティングな可能性が開かれます。

Visual storytelling: ユーザーがスクロールするにつれて、コンテンツを段階的に表示します。
Interactive data visualization: ユーザーがデータを探索するにつれて、グラフやグラフをアニメーション化します。
Parallax effects: スクロール位置に基づいて、異なる要素をさまざまな速度でアニメーション化することにより、奥行きと次元を作成します。
Progress indicators: 長いドキュメントにおけるユーザーの進行状況を視覚的に表します。

Syntax and Properties

@scroll-timeline at-ruleの基本的な構文は次のとおりです。

            @scroll-timeline timeline-name {
  source: auto | <element-selector>;
  orientation: auto | block | inline;
  scroll-offsets: <scroll-offset>[ , <scroll-offset> ]*;
}

各プロパティを分解してみましょう。

`timeline-name`

これは、スクロールタイムラインの一意の識別子です。アニメーションに適用するときに、この名前を使用してタイムラインを参照します。

Example:

            @scroll-timeline my-scroll-timeline {
  /* ... */
}

`source`

このプロパティは、アニメーションを駆動するスクロール位置の要素を指定します。次の2つの値があります。

auto: ブラウザはスクロール要素を自動的に決定します。これは多くの場合、ドキュメントのビューポート（ブラウザウィンドウ）です。
<element-selector>: スクロールソースとして使用する特定の要素を識別するCSSセレクター。これにより、ページ上の特定のコンテナまたはセクションをターゲットにすることができます。

Example (using the viewport as the source):

            @scroll-timeline my-scroll-timeline {
  source: auto; /* Uses the viewport */
  /* ... */
}

Example (using a specific element as the source):

            @scroll-timeline my-scroll-timeline {
  source: #scrollable-container; /* Uses the element with ID "scrollable-container" */
  /* ... */
}

`orientation`

このプロパティは、タイムラインに使用するスクロール方向を指定します。アニメーションが垂直スクロールまたは水平スクロールのどちらによって駆動されるかを決定します。次の3つの値があります。

auto: ブラウザは、ソース要素の主要なスクロール方向に基づいてスクロール方向を自動的に決定します。
block: ブロック（ほとんどの書き込みモードでは垂直）スクロール方向を使用します。
inline: インライン（ほとんどの書き込みモードでは水平）スクロール方向を使用します。

Example (using vertical scrolling):

            @scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block; /* Vertical scrolling */
  /* ... */
}

Example (using horizontal scrolling):

            @scroll-timeline my-scroll-timeline {
  source: #horizontal-scroll-container;
  orientation: inline; /* Horizontal scrolling */
  /* ... */
}

`scroll-offsets`

このプロパティは、アニメーションの特定のポイントに対応するスクロール位置を定義します。これはオプションのプロパティであり、指定しない場合、アニメーションはスクロール可能な領域の最初から最後まで再生されます。使用する場合は、1つ以上のスクロールオフセットを定義できます。それぞれがスクロール位置とアニメーションの進行の対応するポイントを指定します。

<scroll-offset>の構文は次のとおりです。

            <scroll-offset> = <length-percentage> [ at <length-percentage> ]

Where:

最初の<length-percentage>は、スクロール可能な領域内のスクロール位置を表します。
オプションのat <length-percentage>は、対応するアニメーションの進行状況（0％〜100％）を表します。省略した場合、アニメーションの進行状況は、定義されたスクロールオフセット間で均等に分散されます。

Examples:

            /* Scroll position 200px corresponds to animation progress 0% */
scroll-offsets: 200px at 0%;

/* Scroll position at 50% of the scrollable area corresponds to animation progress 50% */
scroll-offsets: 50% at 50%;

/* Multiple offsets: */
scroll-offsets: 0px at 0%, 500px at 50%, 1000px at 100%;

/* Without the "at" keyword - evenly distributed animation progress: */
scroll-offsets: 0px, 500px, 1000px; /* Equivalent to 0px at 0%, 500px at 50%, 1000px at 100% */

Important Considerations for scroll-offsets:

If you specify scroll-offsets, ensure that they cover the range of the scrollable area to avoid unexpected animation behavior.
The animation progress is interpolated between the defined scroll offsets.
If you don't specify scroll-offsets, the animation progress will be evenly distributed across the entire scrollable area.

Applying the Scroll Timeline to an Animation

スクロールタイムラインを定義したら、animation-timelineプロパティを使用してCSSアニメーションに適用する必要があります。

構文は簡単です。

            animation-timeline: timeline-name; /* Use the name you defined in @scroll-timeline */

@keyframesを使用して標準のCSSアニメーションも定義する必要があります。アニメーションは、ユーザーがスクロールするときに発生するCSSプロパティの変更を定義します。さらに、`animation-range` CSSプロパティが設定されていることを確認する必要があります。これは、アニメーションをアクティブにするスクロールタイムラインの範囲を定義します。

完全な例を次に示します。

            /* Define the scroll timeline */
@scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block;
}

/* Define the animation */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply the animation and scroll timeline to an element */
.animated-element {
  animation: fade-in 1s forwards;
  animation-timeline: my-scroll-timeline;
  animation-range: entry 25% cover 75%; /* entry and cover are keyword values for the start and end ranges */
}

In this example:

my-scroll-timelineという名前の@scroll-timelineが定義され、ビューポートをソースとして、垂直スクロールを方向として使用します。
fade-inという名前の@keyframesは、単純なフェードインおよびスライドアップアニメーションを定義します。
.animated-elementクラスにはfade-inアニメーションが適用されますが、タイマーによってトリガーされる代わりに、my-scroll-timelineによって制御されます。
animation-rangeは、要素の上端がビューポートの下部25％に入ったときにアニメーションを開始し、上部25％から離れるときに終了する必要があることを定義します。

Practical Examples and Use Cases

@scroll-timelineを使用して魅力的なWebエクスペリエンスを作成する方法の実用的な例をいくつか見てみましょう。

1. Progressively Revealing Content

これは、ユーザーがページを下にスクロールするにつれてコンテンツを表示する一般的なユースケースです。セクションが表示されるにつれてフェードインする長い形式の記事を想像してください。

HTML:

            <section class="content-section">
  <h2>Section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

<section class="content-section">
  <h2>Section 2</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</section>

CSS:

            @scroll-timeline reveal-timeline {
  source: auto;
  orientation: block;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-section {
  animation: reveal 1s forwards;
  animation-timeline: reveal-timeline;
  animation-range: entry 25% cover 75%;
}

この例では、各.content-sectionは、ビューポートにスクロールするにつれてフェードインします。`animation-range`は、セクションの上端がビューポートの下部25％に入ったときにアニメーションが開始され、セクションが上部25％から離れるときに終了することを保証します。

2. Parallax Effects

視差効果は、背景要素を前景要素よりも異なる速度で移動させることにより、奥行き感を生み出します。@scroll-timelineを使用すると、視差スクロールを簡単に実装できます。

HTML:

            <div class="parallax-container">
  <div class="background-element"></div>
  <div class="foreground-element">
    <h2>Parallax Section</h2>
    <p>Some content here...</p>
  </div>
</div>

CSS:

            .parallax-container {
  position: relative;
  height: 500px; /* Adjust as needed */
  overflow: hidden;
}

.background-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg'); /* Replace with your image */
  background-size: cover;
  transform: translateZ(-1px) scale(2); /* Creates the parallax effect */
  transform-origin: top;
  pointer-events: none; /* Allows clicking on foreground elements */

  animation: parallax-bg 1s linear forwards;
  animation-timeline: parallax-timeline;
  animation-range: 0vh 100vh;
}

.foreground-element {
  position: relative;
  z-index: 1;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.8);
}

@scroll-timeline parallax-timeline {
  source: auto;
  orientation: block;
}

@keyframes parallax-bg {
    0% { transform: translateZ(-1px) scale(2) translateY(0px); }
    100% { transform: translateZ(-1px) scale(2) translateY(-50vh); }
}

この例では、.background-elementは.foreground-elementの背面に配置され、transformを使用して拡大縮小されます。次に、`parallax-bg`アニメーションが適用され、ユーザーがスクロールすると背景が前景よりも遅く移動し、視差効果が生まれます。`animation-range`は、アニメーションがビューポートの全高（0vhから100vh）にわたって実行されることを保証します。

3. Animating a Progress Bar

@scroll-timelineを使用して、ドキュメントのスクロール進行状況を視覚的に表すプログレスバーを作成できます。

HTML:

            <div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <!-- Your content here -->
</div>

CSS:

            .progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  animation: progress-bar-fill 1s linear forwards;
  animation-timeline: document-scroll-timeline;
}

@scroll-timeline document-scroll-timeline {
  source: auto;
  orientation: block;
}

@keyframes progress-bar-fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

この例では、ユーザーがドキュメントをスクロールすると、.progress-barの幅が0％から100％にアニメーション化されます。@scroll-timelineは`document-scroll-timeline`という名前で、それが何を表すかを明確にしています。

Advanced Techniques

基本を理解したら、高度なテクニックを調べて、さらに洗練されたスクロール駆動型アニメーションを作成できます。

1. Using `scroll-offsets` for Precise Control

scroll-offsetsプロパティを使用すると、特定のスクロール位置を特定のアニメーション進行値にマップできます。これは、スクロール中に特定のポイントで特定のアニメーション状態をトリガーする場合に役立ちます。

            @scroll-timeline custom-timeline {
  source: #scrollable-container;
  orientation: block;
  scroll-offsets: 100px at 0%, 500px at 50%, 1000px at 100%;
}

@keyframes custom-animation {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

.animated-element {
  animation: custom-animation 1s forwards;
  animation-timeline: custom-timeline;
}

この例では、アニメーションは次のようになります。

スクロール位置が100pxの場合、translateX(-100px)およびopacity: 0で開始します。
スクロール位置が500pxの場合、translateX(0)およびopacity: 1に達します。
スクロール位置が1000pxの場合、translateX(100px)およびopacity: 0で終了します。

2. Combining with JavaScript

@scroll-timelineはCSSを介して強力なアニメーション制御を提供しますが、JavaScriptと組み合わせて、さらに柔軟性を高めることができます。たとえば、JavaScriptを使用して、次のことを行う場合があります。

ビューポートサイズまたはコンテンツの変更に基づいて、scroll-offsetsを動的に計算して更新します。
スクロールの進行に基づいて、追加のJavaScriptベースのエフェクトまたはインタラクションをトリガーします。
@scroll-timelineを完全にサポートしていないブラウザのフォールバックソリューションを実装します。

JavaScriptを使用してスクロールの進行状況を読み取り、CSS変数を更新する基本的な例を次に示します。

            const scrollableElement = document.getElementById('scrollable-container');
const animatedElement = document.querySelector('.animated-element');

scrollableElement.addEventListener('scroll', () => {
  const scrollPosition = scrollableElement.scrollTop;
  const maxScroll = scrollableElement.scrollHeight - scrollableElement.clientHeight;
  const scrollPercentage = (scrollPosition / maxScroll) * 100;

  animatedElement.style.setProperty('--scroll-progress', scrollPercentage + '%');
});

次に、このCSS変数をアニメーション内で使用できます。

            @keyframes custom-animation {
  0% {
    transform: translateX(calc(var(--scroll-progress) * -1px));
  }
  100% {
    transform: translateX(calc(var(--scroll-progress) * 1px));
  }
}

.animated-element {
  --scroll-progress: 0%; /* Initial value */
  animation: custom-animation 1s linear forwards;
  animation-timeline: scroll-driven-timeline;
}

3. Leveraging Different Easing Functions

animation-timing-functionはスクロールタイムライン自体には直接適用できませんが（タイムラインは時間ではなくスクロールの進行によって駆動されるため）、@keyframes内でイージング関数を使用して、アニメーションの速度とリズムをさまざまな段階で制御できます。ease-in、ease-out、ease-in-outなどのさまざまなイージング関数や、カスタムのキュービックベジエ曲線を使用して、目的の効果を実現します。

Browser Compatibility and Fallbacks

2023年後半の時点で、@scroll-timelineは、Chrome、Edge、Firefox、Safariなどの最新のブラウザで比較的優れたブラウザサポートを受けています。ただし、本番環境に実装する前に、Can I use...などのWebサイトで現在の互換性ステータスを確認することが重要です。

@scroll-timelineをサポートしていないブラウザの場合は、従来のJavaScriptベースのスクロールイベントリスナーと、GSAP（GreenSock Animation Platform）やAnime.jsなどのアニメーションライブラリを使用してフォールバックを提供できます。CSS機能クエリ（@supports）を使用して、@scroll-timelineベースのアニメーションまたはJavaScriptベースのフォールバックを条件付きで適用することもできます。

            @supports (animation-timeline: scroll()) {
  /* Apply @scroll-timeline-based animations */
  .animated-element {
    animation: fade-in 1s forwards;
    animation-timeline: my-scroll-timeline;
  }
} @else {
  /* Apply JavaScript-based fallback */
  .animated-element {
    /* Hide initially */
    opacity: 0;
  }

  /* (JavaScript code to detect scroll and apply opacity) */
}

Accessibility Considerations

@scroll-timelineまたはその他のアニメーション技術を使用する場合は、アクセシビリティを考慮することが重要です。アニメーションが次の原因にならないようにしてください。

Seizures: 点滅または急速に変化するアニメーションは避けてください。
Distraction: 特にアニメーションが長くて気が散る場合は、ユーザーがアニメーションを一時停止または無効にする方法を提供します。
Cognitive overload: アニメーションは控えめに使用し、純粋に装飾的であるだけでなく、明確な目的を果たすようにしてください。
Motion sickness: 一部のユーザーで乗り物酔いを引き起こす可能性があるため、視差効果に注意してください。

静的なコンテンツや説明的なテキストなど、アニメーションを介して提示される情報にアクセスするための代替方法を提供することを検討してください。ARIA属性を使用して、支援技術にセマンティックな意味とコンテキストを提供します。

Best Practices

@scroll-timelineを使用する際に留意すべきベストプラクティスを次に示します。

Use descriptive timeline names: 目的を明確に示すタイムライン名を選択します（例：parallax-background-timeline、reveal-section-timeline）。
Keep animations performant: パフォーマンスのボトルネックを回避するために、アニメーションを最適化します。可能な限り、transformやopacityなどのハードウェアアクセラレーションCSSプロパティを使用します。
Test thoroughly: さまざまなデバイスとブラウザでアニメーションをテストして、期待どおりに動作し、アクセシビリティやパフォーマンスの問題が発生しないことを確認します。
Start Simple: シンプルなアニメーションから始めて、経験を積むにつれて徐々に複雑さを増していきます。
Consider the User Experience: アニメーションがユーザーエクスペリエンスを向上させることを確認し、損なわないようにしてください。過度に複雑または気が散るアニメーションは避けてください。
Use the `animation-range` CSS property: 要素がスムーズで予測可能なエクスペリエンスのためにビューポートにある場合にのみアニメーションがトリガーされるようにします。

Conclusion

@scroll-timelineは、開発者が魅力的でインタラクティブなスクロール駆動型アニメーションを作成できる強力なCSS機能です。アニメーションをユーザーのスクロール動作にリンクさせることで、より自然で応答性の高いWebエクスペリエンスを作成できます。構文、プロパティ、および高度なテクニックを理解することで、@scroll-timelineを活用してWebデザインを向上させ、魅力的なユーザーエクスペリエンスを作成できます。@scroll-timelineを実装するときは、ブラウザの互換性、アクセシビリティ、およびパフォーマンスを考慮し、常にユーザーエクスペリエンスを優先することを忘れないでください。

Mastering CSS @scroll-timeline: Animation Control Through Scroll Progress

What is CSS @scroll-timeline?

Syntax and Properties

timeline-name

source

orientation

scroll-offsets

Applying the Scroll Timeline to an Animation

Practical Examples and Use Cases

1. Progressively Revealing Content

2. Parallax Effects

3. Animating a Progress Bar

Advanced Techniques

1. Using scroll-offsets for Precise Control

2. Combining with JavaScript

3. Leveraging Different Easing Functions

Browser Compatibility and Fallbacks

Accessibility Considerations

Best Practices

Conclusion

`timeline-name`

`source`

`orientation`

`scroll-offsets`

1. Using `scroll-offsets` for Precise Control